import Taro, {Component, useCallback, useState} from '@tarojs/taro'
import {View, Text, Button} from '@tarojs/components'
import Index from "../index";

export default class Clock extends Component {
  constructor(props) {
    super(props)
    this.state = {
      date: new Date(),
      isToggleOn: true,
      isLoggedIn: false,
      name: '徐宏亮'
    }
  }

  config = {
    navigationBarTitleText: '时钟'
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    )
  }

  componentWillUnmount() {
    clearInterval(this.timerID)
  }

  tick() {
    this.setState({
      date: new Date()
    }, () => {
      // 在这个函数内你可以拿到 setState 之后的值
    })
  }

  onActivateLasers = (e) => {
    // 阻止事件冒泡
    e.stopPropagation()
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }))
  }

  /**
   * 1. 函数的命名必须以 render 开头，render 后的第一个字母需要大写
   * 2. 函数的参数不得传入 JSX 元素或 JSX 元素引用
   * 3. 函数不能递归地调用自身 （可创建两个相同的函数组件实现）
   */
  renderFooter (footer) {
    const { name } = this.state
    return <View>{footer}, {name}</View>
  }

  renderTitle = () => {
    // renderTitle 每次都能获取到当前作用域 `name` 的值
    const { name } = this.state
    return <View>Welcome, {name}</View>
  }

  render() {
    const { isLoggedIn, date, isToggleOn } = this.state
    const loadingStatus = 'loading'
    const numbers = [...Array(10).keys()] // [0, 1, 2, ..., 10]
    const listItems = numbers
      .filter((number) => {
        return number < 5
      })
      .map((number) => {
      return <Text key={String(number)}> 我是第 {number + 1} 个数字</Text>
    })

    const [c1, setC1] = useState(0);
    const [c2, setC2] = useState(0);
    const [c3, setC3] = useState(0);
    const increment = c => c + 1
    // 只有 useCallback 对应的 c1 或 c2 的值改变时，才会返回新的函数
    const increment1 = useCallback(() => setC1(increment), [c1]);
    const increment2 = useCallback(() => setC2(increment), [c2]);

    return (
      <View>
        <Text>Hello, world!</Text>
        <Text>现在的时间是 {date.toLocaleTimeString()}.</Text>
        <Index name='Wallace' />
        <Button onClick={this.onActivateLasers}>
          我是按钮{isToggleOn ? 'ON' : 'OFF'}
        </Button>
        <View>
          {/*{isLoggedIn && <Text>已登录</Text>}*/}
          {/*{!isLoggedIn && <Text>未登录</Text>}*/}
          {isLoggedIn
            ? <Text>已登录</Text>
            : <Text>未登录</Text>
          }
          {
            {
              'loading': <View>加载中</View>,
              'fail': <View>加载失败</View>,
              'no-more': <View>没有更多了</View>
            }[loadingStatus] /** loadingStatus 是 `loading`、`fail`、`no-more`  其中一种状态 **/
          }
          <View>{listItems}</View>
          {this.renderFooter('footer')}
        </View>
        <View>
          {/* 重要人士我们要欢迎他三次 */ }
          {this.renderTitle()}
          {this.renderTitle()}
          {this.renderTitle()}
        </View>
        <View>
          <View> Counter 1 is {c1} </View>
          <View> Counter 2 is {c2} </View>
          <View> Counter 3 is {c3} </View>
          <View>
            <Button onClick={increment1}>Increment Counter 1</Button>
            <Button onClick={increment2}>Increment Counter 2</Button>
            <Button onClick={() => setC3(increment)}>Increment Counter 3</Button>
          </View>
        </View>
      </View>
    )
  }
}
